<template>
  <div class="shop-box">  
    <div class="filter-top"> 
        <div class="search-box">
            <search v-model="searchText"
                position= "relative"
                placeholder="请输入地址"
                ref="search">
            </search>    
        </div>
        <div class="iconfont iconshaixuan"  @click="showFilter = true"></div> 
    </div>
    <div v-for="(item,index) in shopList" :key="index" class="shop-item">
        <div class="cityName">{{item.cityName}}</div>
        <div v-for="(shop,idx) in item.list" :key="idx" class="adrees">
            {{shop.adreess}}
        </div>
    </div>

    <!--  下拉筛选 -->
    <top-filter :showFilter.sync="showFilter">
      <div class="filter-content" @click.stop>
        
        <div class="city-choose-name">城市</div>
        <div class="row-box">
          <group>
            <popup-picker v-model="city" show-name :data="cityList" placeholder="请选择城市"></popup-picker>
          </group> 
        </div>
        <div class="btn-box">
          <div class="reset btn" @click="reset">重置</div>
          <div class="confirm btn" @click="confirmSelect">确认</div>
        </div>
      </div>
    </top-filter>
    <!-- 下拉筛选end -->
  </div>

</template>

<script>
import row from '@/components/row'
import topFilter from '@/components/topFilter'
import api from '@/api/api.js' 
import { Group, PopupPicker,XDialog,Search } from 'vux'
export default { 
  components: {
    row,
    topFilter,
    Search,
    XDialog,
    Group, 
    PopupPicker
  },
  data () {
    return {
      showFilter:false,
      cityList:[ JSON.parse(sessionStorage.cityList  || '[]')],
      searchText:'',
      city:[],
      shopList:[
        {id:'1',cityName:'深圳',list:[{adreess:'东门大街120号',id:'10'},{adreess:'东直门大街154号',id:'10'}]},
        {id:'2',cityName:'广州',list:[{adreess:'黄渤路203号',id:'10'},{adreess:'东直门大街154号',id:'10'}]},
      ]
    }
  },
  mounted () {
  },
  filters: {
     
  },
  methods: {
      //重置筛选
    reset(){
      this.searchText = '';
      this.city=[];
    },
    filterShow(){
      this.showFilter = !this.showFilter
    },
    confirmSelect(){
      this.pageNum = 1;
      this.getData();
    },
  }
}
</script>
<style lang="less" scoped>
    .shop-box{
        padding-top: 50px;
    }
    .cityName{
        font-size: 16px;
        font-weight: bold;
        height: 30px;
        line-height: 30px;
        padding-left: 16px;
        margin-top: 10px;
    }
    .adrees{
        height: 44px;
        line-height: 44px;
        padding-left: 20px;
        position: relative;
        color: #666;
        &::before{
            content: '';
            position: absolute;
            right: 0;
            left: 12px;
            bottom: 0;
            height: 1px;
            background: #eee;
        }
    }
    .city-choose-name{
        margin-top: 15px;
    }
    .filter-top{
        height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        border-bottom: 1px solid #eee;
        top: 0;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 3;
        .isclick{
            border-width: 0 1px 1px 0;
            margin-top: -6px;
        }
    }
    .btn-box{
        display: flex;
        width: 100%;
        margin-top: 20px;
        height: 44px;
        justify-content: space-between; 
    .btn{
        border-radius: 8px;
        height: 44px;
        width: 45%;
        line-height: 44px;
        text-align: center;
        color: #fff;
        &:active{
        opacity: .7;
        }
        &.reset{
        background: #ddd;
        }
        &.confirm{
        background: #FABE00;
        }
    }
}
.search-box{
    width: 90%;
}
.iconshaixuan{
    color: #999;
    margin-left: 6px;
    font-size: 18px;
}
/deep/.weui-search-bar__label{
  top: 3px;
}
.filter-content{
  background: #fff;
  width: 100%;
  padding: 20px;
  /deep/.weui-search-bar:before{
    height: 0;
  }
  /deep/.weui-search-bar::after{
    height: 0;
  }
  .row-box{
    margin-bottom: 20px;
  }
  .filter-title{
    padding-top: 20px;

  }
  .data-time-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
/deep/.vux-popup-picker-select{
  text-align: left !important;
}
/deep/.weui-search-bar,.vux-search-fixed{
  position: relative !important;
  padding: 0;
  background: #fff;
}
/deep/.weui-search-bar__cancel-btn{
  text-decoration: none;
}
/deep/.weui-search-bar:after{
  display: none;
}
/deep/.weui-search-bar::before{
  display: none;
}
</style>